<template>
  <Modal
      width="600"
      class="modal-tips"
      v-model="config"
      :mask-closable="false"
      title="操作结果"
      footer-hide
      @on-cancel="cancel"
  >
    <div class="domains-table">
      <div class="table-tool">
        <div class="table-tool__left">
          <Button
              @click="changeStatus(1)"
              class="select-item suc-select-item"
              :class="[status === 1 ? 'active' : 'normal']">
            成功（{{resultList.filter((item) => item.status === 1).length}}）
          </Button>
          <Button
              @click="changeStatus(0)"
              class="select-item fail-select-item"
              :class="[status === 0 ? 'active' : 'normal']">
           失败（{{resultList.filter((item) => item.status === 0).length}}）
          </Button>
        </div>
        <div class="table-tool__right">
          <a class="el-link el-link--default is-underline">
<!--            <span class="el-link__inner">将无法PUSH的域名复制到剪贴板</span>-->
          </a>
        </div>
      </div>
      <!-- 表格 -->
      <Table
          ref="domainTable"
          :columns="columns"
          :data="resultList.filter((item) => item.status === status)"
          :disabled-hover="true"
          stripe
          height="200"
      ></Table>

    </div>
  </Modal>
</template>

<script>
export default {
  name: "domainResultModal",
  props: {
    show: {
      type: Boolean,
      default: false,
    },
    resultList: {
      type: Array,
      default: () => [],
    },
  },
  watch: {
    show: {
      immediate: true,
      handler(newValue) {
        if (newValue) {
          this.reset();
        }
      },
    }
  },
  data() {
    return {
      config: false,
      status: 1,
      columns: [
        {
          title: "序号",
          type: "index",
          width: 100,
          align: "center",
        },
        {
          title: "域名",
          key: "domainName",
          align: "center",
        },
        {
          title: "结果",
          key: "reason",
          align: "center",
          render: (h, params) => {
            return h("span", params.row.status === 1 ? "处理中" : params.row.reason);
          },
        },
      ]
    }
  },
  methods: {
    changeStatus(status) {
      this.status = status
    },
    cancel() {
      this.$emit("updateCount");
    },
    reset() {
      this.status = 1
      this.config = true
    }
  }
}
</script>

<style lang="scss">
.domains-table {
  padding: 14px 16px;
}
.table-tool {
  padding-bottom: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.table-tool__left .el-button.active {
  background-color: #f68a0c;
  border-color: #f68a0c;
  color: #fff;
}

.el-link {
  display: inline-flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  position: relative;
  text-decoration: none;
  outline: none;
  cursor: pointer;
  padding: 0;
  font-size: 14px;
  font-weight: 500;
  color: $fcs;
}
.el-link:hover {
  color: $ft;
}
.select-item:focus {
  box-shadow: none;
}
.select-item:hover {
  border-color: $fs;
  color: $fs;
}
.select-item.active {
  background-color: $fs;
  border-color: $fs;
  color: $w;
}
.fail-select-item {
  margin-left: 15px;
}
</style>
